<template>
  <div>
    <el-form label-width="20px" :model="address" :inline="true" v-if="isLabel">
      <el-form-item label="省">
        <el-select v-model="address.provice">
          <el-option
            v-for="(item, index) in proviceList"
            :key="index"
            :label="item.region_name"
            :value="item.region_code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select v-model="address.city">
          <el-option
            v-for="(item, index) in cityList"
            :key="index"
            :label="item.region_name"
            :value="item.region_code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="县" v-if="level === 3">
        <el-select v-model="address.area">
          <el-option
            v-for="(item, index) in areaList"
            :key="index"
            :label="item.region_name"
            :value="item.region_code">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-else>
      <el-select v-model="address.provice" v-loading="loading">
        <el-option
          v-for="(item, index) in proviceList"
          :key="index"
          :label="item.region_name"
          :value="item.region_code">
        </el-option>
      </el-select>
      <el-select v-model="address.city" v-loading="loading">
        <el-option
          v-for="(item, index) in cityList"
          :key="index"
          :label="item.region_name"
          :value="item.region_code">
        </el-option>
      </el-select>
      <el-select v-model="address.area" v-if="level === 3">
        <el-option
          v-for="(item, index) in areaList"
          :key="index"
          :label="item.region_name"
          :value="item.region_code">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { getProvice, getCities } from '@/api/user'
export default {
  data() {
    return {
      proviceList: [],
      cityList: [],
      areaList: [],
      address: {
        provice: '',
        city: '',
        area: ''
      },
      loading: true
    }
  },
  props: {
    level: {
      type: Number,
      default: 3
    },
    isLabel: {
      type: Boolean,
      default: true
    },
    provice: {
      default: 0
    },
    city: {
      default: 0
    }
  },
  created() {
    this.getProvice()
    this.getCities()
  },
  methods: {
    getProvice() {
      this.loading = true
      getProvice().then(res => {
        this.proviceList = res.data
        this.address.provice = this.provice
      })
    },
    getCities(code = 10) {
      this.address.city = ''
      this.loading = true
      getCities({
        code: code
      }).then(res => {
        this.cityList = res.data
        this.address.city = this.city
        this.loading = false
      })
    },
    getArea(code = 10) {
      this.loading = true
      this.address.area = ''
      getCities({
        code: code
      }).then(res => {
        this.areaList = res.data
        this.loading = false
      })
    }
  },
  watch: {
    'address.provice'(newValue) {
      this.getCities(newValue)
    },
    provice(newValue) {
      this.address.provice = newValue
    },
    city(newValue) {
      this.address.city = newValue
    },
    'address.city'(newValue) {
      this.getArea(newValue)
      if (newValue && this.level === 2) {
        delete this.address.area
        this.$emit('address', this.address)
      }
    },
    'address.area'(newValue) {
      if (newValue) {
        this.$emit('address', this.address)
      }
    }
  }
}
</script>

<style scoped>
</style>
